<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>数据字典管理界面</title>
    <meta charset="utf-8">
    <style>
    	html, body{ margin:0; height:100%; }
    	table{font-size:18px}
    	.input{width:250px;margin:4px;height:35px;border: 1px solid #ccc;font-size:18px;border-radius:4px}
    	label{margin:4px}		
    	.btn{width:100px;height:35px;border-radius:4px;background:#6CAEF5;font-size:18px;margin:15px}	
    </style>
    <script>
    
    $(function(){
    	var datagrid; //定义全局变量datagrid
        var editRow = undefined; //定义全局变量：当前编辑的行
        
        var codedatagrid; //定义全局变量datagrid
        var codeeditRow = undefined; //定义全局变量：当前编辑的行
        
        var selectedType=undefined;

        datagrid = $('#baseType').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:710,
            height:'98%',
    		url:"${path}/baseType/getBaseTypeList",
    		columns:[[
    			{field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
    			{field:'name',title:'字典名字',width:200,'sortable':true,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
    			{field:'desc',title:'字典描述',width:200,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
    			{field:'type',title:'字典代码',width:250,fitColumns:true ,editor:{ type: 'validatebox',options: { required: true} }}    				 
    		]],
    		queryParams: { action: 'query' }, //查询参数
            toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
                //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                }
                //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
                if (editRow == undefined) {
                    datagrid.datagrid("insertRow", {
                        index: 0, // index start with 0
                        row: {}
                    });
                    //将新插入的那一行开户编辑状态
                    datagrid.datagrid("beginEdit", 0);
                    //给当前编辑的行赋值
                    editRow = 0;           
                }

            }
            }, '-',
             { text: '删除', iconCls: 'icon-remove', handler: function () { 
            	 //删除时先获取选择行
                 var rows = datagrid.datagrid("getSelections");
                 console.log(rows);
                 //选择要删除的行
                 if (rows.length > 0) {
                     $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                         if (r) {
/*                            var ids = [];
                              for (var i = 0; i < rows.length; i++) {
                            //	 console.log(rows[i].product_id);
                                 ids.push(rows[i].id);
                             } */
                             //将选择到的行存入数组并用,分隔转换成字符串，
                             //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id                            
                 			$.ajax({
                   			 	url: "${path}/baseType/deleteBaseType",    //请求的url地址
                   			 	dataType: "json",   //返回格式为json
                   			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                   			 	data: { "type":rows[0].type},    //参数值
                   			 	//type: "jsonp",   //请求方式
                   			 	beforeSend: function() {
                      			  //请求前的处理
                   			 	},
                   			 	success: function(req) {
                   			 		if(req.status=='1'){
                   			 			datagrid.datagrid("reload");
                   			 			codedatagrid.datagrid("reload");	
                   			 		}else{
                   			 			$.messager.alert("提示", req.msg,"info"); 
                   			 		}                			 		
                				},
                				complete: function(req) {
					
                				},
                				error:function(req) {
                					console.log(req);
                					$.messager.alert("警告", "删除出错","error"); 
                				}
                			});
         
                         }
                     });
                 }
                 else {
                     $.messager.alert("提示", "请选择要删除的行", "error");
                 }
             }
             }, 
             '-',
             { text: '修改', iconCls: 'icon-edit', handler: function () {
                 //修改时要获取选择到的行
                 var rows = datagrid.datagrid("getSelections");
                 //如果只选择了一行则可以进行修改，否则不操作
                 if (rows.length == 1) {
                     //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                     if (editRow != undefined) {
                         datagrid.datagrid("endEdit", editRow);
                     }
                     //当无编辑行时
                     if (editRow == undefined) {
                         //获取到当前选择行的下标
                         var index = datagrid.datagrid("getRowIndex", rows[0]);
                         //开启编辑
                         //datagrid.datagrid("beginEdit", index);
                         //把当前开启编辑的行赋值给全局变量editRow
                         editRow = index;        
                         
                         datagrid.datagrid("beginEdit", editRow);

                         //当开启了当前选择行的编辑状态之后，
                         //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                         datagrid.datagrid("unselectAll");
                     }
                 }
              }
             }
             ,'-',
             { text: '保存', iconCls: 'icon-save', handler: function () {
                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                 datagrid.datagrid("endEdit", editRow);
             }
             }, '-',
             { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                 editRow = undefined;
                 datagrid.datagrid("rejectChanges");
                 datagrid.datagrid("unselectAll");
             	}
             }
             ],
             
             
            onAfterEdit: function (rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                console.info(rowData);
                editRow = undefined;
                console.info(changes);  
                
                var courseTextbook=JSON.stringify(rowData);
                
                if(rowData != null&&!$.isEmptyObject(changes)){
         			$.ajax({
           			 	url: "${path}/baseType/saveOrUpdateBaseType",    //请求的url地址
           			 	dataType: "json",   //返回格式为json
           			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
           			 	data: rowData,//{ "courseTextbook":courseTextbook },    //参数值
           			 	//type: "jsonp",   //请求方式
           			 	success: function(req) {
           			 		if(req.status=='1'){
           			 			datagrid.datagrid("reload");	
           			 		}else{
           			 			$.messager.alert("提示", req.msg,"info"); 
           			 		}                			 		
        				},
        				error:function(req) {
        					console.log(req);
        					$.messager.alert("警告", "修改出错","error"); 
        				}
        			})
            	
                }
  
            },
            onClickRow:function (rowIndex, rowData) {           	
            	selectedType=rowData.type;
             	codedatagrid.datagrid('load',{
            		type: rowData.type
            	}); 
            },
            onDblClickRow: function (rowIndex, rowData) {
            //双击开启编辑行h
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                    editRow=undefined;
                }
                if (editRow == undefined) {
                 	datagrid.datagrid("beginEdit", rowIndex);
                    editRow = rowIndex;  

/*      				 $('#book').form('load',rowData);    				 
     				 $('#editWindow').window('open'); */
                }
            }
    	})
  
     var pager = datagrid.datagrid('getPager');   
    pager.pagination({
  	               total:2000,
  	               pageSize:10, 	
  	               pageNumber:1,
  	               pageList:[10,20,30],  	               
  	               loading:true,
  	               showPageList:true,
  	               showRefresh:true,
  	               beforePageText:'当前页数',
  	               afterPageText:' 共{pages}页',
  	               displayMsg:'共{total}条记录'
  	           });   


	
    //右list


    codedatagrid = $('#baseTypeCode').datagrid({
		rownumbers:true,
		singleSelect:true,
		pagination:true,
		fit: true, //datagrid自适应宽度
        fitColumn: true, //列自适应宽度
        striped: true, //行背景交换
        nowap: false, //列内容多时自动折至第二行
        border: false,
        idField: 'id', //主键
        width:560,
        height:'98%',
		url:"${path}/baseType/getBaseTypeCodeList",
		columns:[[
			{field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
			{field:'code',title:'代码',width:100,'sortable':true,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
			{field:'name',title:'名字',width:200,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
			{field:'desc',title:'描述',width:200,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }}/* ,	
			{field:'type',title:'类型',width:250,fitColumns:true ,editor:{ type: 'validatebox',options: { required: true} }}  */   				 
		]],
		/* queryParams: { action: 'query' }, //查询参数 */
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
            //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
            if (editRow != undefined) {
            	codedatagrid.datagrid("endEdit", editRow);
            }
            //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
            if (editRow == undefined) {
            	codedatagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });
                //将新插入的那一行开户编辑状态
                codedatagrid.datagrid("beginEdit", 0);
                //给当前编辑的行赋值
                editRow = 0;           
            }

        }
        }, '-',
         { text: '删除', iconCls: 'icon-remove', handler: function () { 
        	 //删除时先获取选择行
             var rows = codedatagrid.datagrid("getSelections");
             console.log(rows);
             //选择要删除的行
             if (rows.length > 0) {
                 $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                     if (r) {
                         //将选择到的行存入数组并用,分隔转换成字符串，
                         //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id                            
             			$.ajax({
               			 	url: "${path}/baseType/deleteCodeByID",    //请求的url地址
               			 	dataType: "json",   //返回格式为json
               			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
               			 	data: { "id":rows[0].id},    //参数值
               			 	//type: "jsonp",   //请求方式
               			 	beforeSend: function() {
                  			  //请求前的处理
               			 	},
               			 	success: function(req) {
               			 		if(req.status=='1'){
               			 			codedatagrid.datagrid("reload");	
               			 		}else{
               			 			$.messager.alert("提示", req.msg,"info"); 
               			 		}                			 		
            				},
            				complete: function(req) {
				
            				},
            				error:function(req) {
            					console.log(req);
            					$.messager.alert("警告", "删除出错","error"); 
            				}
            			});
     
                     }
                 });
             }
             else {
                 $.messager.alert("提示", "请选择要删除的行", "error");
             }
         }
         }, 
         '-',
         { text: '修改', iconCls: 'icon-edit', handler: function () {
             //修改时要获取选择到的行
             var rows = codedatagrid.datagrid("getSelections");
             //如果只选择了一行则可以进行修改，否则不操作
             if (rows.length == 1) {
                 //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                 if (editRow != undefined) {
                	 codedatagrid.datagrid("endEdit", editRow);
                 }
                 //当无编辑行时
                 if (editRow == undefined) {
                     //获取到当前选择行的下标
                     var index = datagrid.datagrid("getRowIndex", rows[0]);
                     //开启编辑
                     //datagrid.datagrid("beginEdit", index);
                     //把当前开启编辑的行赋值给全局变量editRow
                     editRow = index;        
                     
                     codedatagrid.datagrid("beginEdit", editRow);

                     //当开启了当前选择行的编辑状态之后，
                     //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                     codedatagrid.datagrid("unselectAll");
                 }
             }
          }
         }
         ,'-',
         { text: '保存', iconCls: 'icon-save', handler: function () {
             //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
             codedatagrid.datagrid("endEdit", editRow);
         }
         }, '-',
         { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             editRow = undefined;
             codedatagrid.datagrid("rejectChanges");
             codedatagrid.datagrid("unselectAll");
         	}
         }, '-',
         { text: '清空', iconCls: 'icon-redo', handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             codedatagrid.datagrid('loadData', { total: 0, rows: [] });
             var data = codedatagrid.datagrid('getData');
             console.log(data);
             
         	}
         }
         ],
         
         
        onAfterEdit: function (rowIndex, rowData, changes) {
            //endEdit该方法触发此事件
         //   console.info(rowData);
            editRow = undefined;
          //  console.info(changes);  
            
            rowData.type= selectedType;

            var courseTextbook=JSON.stringify(rowData);
            
             if(rowData != null&&!$.isEmptyObject(changes)){
     			$.ajax({
       			 	url: "${path}/baseType/saveOrUpdateBaseTypeCode",    //请求的url地址
       			 	dataType: "json",   //返回格式为json
       			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
       			 	data: rowData,//{ "courseTextbook":courseTextbook },    //参数值
       			 	//type: "jsonp",   //请求方式
       			 	success: function(req) {
       			 		if(req.status=='1'){
       			 		codedatagrid.datagrid("reload");	
       			 		}else{
       			 			$.messager.alert("提示", req.msg,"info"); 
       			 		}                			 		
    				},
    				error:function(req) {
    					console.log(req);
    					$.messager.alert("警告", "修改出错","error"); 
    				}
    			})
        	
            } 

        },

        onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行h
            if (editRow != undefined) {
            	codedatagrid.datagrid("endEdit", editRow);
                editRow=undefined;
            }
            if (editRow == undefined) {
            	codedatagrid.datagrid("beginEdit", rowIndex);
                editRow = rowIndex;  

 				 $('#book').form('load',rowData);    				 
 				 $('#editWindow').window('open');
            }
        }
	})

 var codepager = codedatagrid.datagrid('getPager');   
    codepager.pagination({
	               total:2000,
	               pageSize:10, 	
	               pageNumber:1,
	               pageList:[10,20,30],  	               
	               loading:true,
	               showPageList:true,
	               showRefresh:true,
  	               beforePageText:'当前页数',
  	               afterPageText:' 共{pages}页',
  	               displayMsg:'共{total}条记录'
	           });   
})
    
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center'"  style="width:55%;">
        <table id="baseType" title="数据字典" class="easyui-datagrid" style="width:850px"
                singleSelect="true" iconCls="icon-save">
        </table>
    </div>
    <div data-options="region:'east',split:true" style="width:45%;">
        <table id="baseTypeCode" title="数据字典条目" class="easyui-datagrid" style="width:850px"
                singleSelect="true" iconCls="icon-save">
        </table>
    </div>
</body>
</html>
